<script setup lang="ts">
import navList from "../nav-list/index.vue";
import navPopup from "../nav-popup/index.vue";
import navPopupList from "../nav-popup-list/index.vue";
import { administratorChildren } from "@/routes";
const main = useMainStore();
const route = useRoute();
const routes = computed(() => {
  if (main.layout === "top-mix") {
    const activeTopLevelRoute = administratorChildren.find((item) => item.name == route.name);
    if (activeTopLevelRoute) return activeTopLevelRoute.children || [];
    else return routes.value;
  }

  return administratorChildren;
});
watchEffect(() => {
  if (main.layout != "top-mix") return;

  if (routes && routes.value?.length > 0)
    main.cssVars["--aside-width"] = main.collapse ? "48px" : "210px";
  else main.cssVars["--aside-width"] = "0px";
});
</script>

<template>
  <div class="menu-left">
    <nav-list
      :routes="routes"
      :level="1"
      v-if="main.layoutHas('mobile') || (main.layoutHas('left', 'top-mix') && !main.collapse)"
    />
    <nav-popup
      :routes="routes"
      :level="1"
      layout="vertical"
      v-if="main.layoutHas('left', 'top-mix') && main.collapse"
    />
    <nav-popup-list :routes="routes" v-if="main.layoutHas('left-mix')" />
  </div>
</template>
<style lang="less" scoped>
.menu-left {
  // max-height: calc(100vh - 250px);
  overflow: auto;
  overflow-x: hidden;
}
</style>
